<script>
import { defineComponent, reactive } from 'vue'
import NavigationDropdown from './NavigationDropdown.vue'

export default defineComponent({
  name: 'TopBar',
  components: { NavigationDropdown },
  setup() {

    let articleAreaOptions = reactive({
      title: 'test',
      dropdownItems: [
        {
          name: '热门文章',
          text: '精选高质量技术文章',
          iconName: 'remenwenzhang',
          color: 'blue',
          link: '#',
        },
        {
          name: '最新发布',
          text: '精选高质量技术文章',
          iconName: 'latest-release',
          color: 'purple',
          link: '#',
        },
        {
          name: '我的收藏',
          text: '收藏精选内容',
          iconName: 'wodeshoucang',
          color: 'green',
          link: '#',
        },
      ],
    })
    let resourceCenterOptions = reactive({
      title: 'test',
      dropdownItems: [
        {
          name: '代码仓库',
          text: '优质开源项目分享',
          iconName: 'daimacangku',
          color: 'blue',
          link: '#',
        },
        {
          name: '设计资源',
          text: 'UI/UX设计素材',
          iconName: 'design-resource',
          color: 'purple',
          link: '#',
        },
        {
          name: '效率工具',
          text: '提升开发效率神器',
          iconName: 'efficiency-tool',
          color: 'orange',
          link: '#',
        },
      ],
    })
    let learningPromotionOptions = reactive({
      title: 'test',
      dropdownItems: [
        {
          name: '精品课程',
          text: '系统化的技能提升',
          iconName: 'quality-course',
          color: 'blue',
          link: '#',
        },
        {
          name: '学习路线',
          text: '职业成长指导',
          iconName: 'xuexiluxian',
          color: 'green',
          link: '#',
        },
        {
          name: '技术社区',
          text: '交流分享成长',
          iconName: 'technical-community',
          color: 'purple',
          link: '#',
        },
      ],
    })
    return { articleAreaOptions, resourceCenterOptions, learningPromotionOptions }
  },
})
</script>

<template>
  <main class="top-bar_container">
    <section class="top-bar_logo">
      <a href="#">
        <h1>logo</h1>
      </a>
      <nav class="top-bar_nav">
        <ul class="nav-menu">
          <li class="menu-item">
            <a href="#"><i class="iconfont icon-home"></i><span class="nav_text">首页</span></a>
          </li>
          <li class="menu-item">
            <NavigationDropdown :options="articleAreaOptions">
              <a href="#"><i class="iconfont icon-article_area"></i><span class="nav_text">文章专区</span><i
                  class="iconfont icon-xiasanjiao"></i></a>
            </NavigationDropdown>
          </li>
          <li class="menu-item">
            <NavigationDropdown :options="resourceCenterOptions">
              <a href="#"><i class="iconfont icon-resource_center"></i><span class="nav_text">资源中心</span><i
                  class="iconfont icon-xiasanjiao"></i></a>
            </NavigationDropdown>
          </li>
          <li class="menu-item">
            <NavigationDropdown :options="learningPromotionOptions">
              <a href="#"><i class="iconfont icon-learning_promotion"></i><span class="nav_text">学习提升</span><i
                  class="iconfont icon-xiasanjiao"></i></a>
            </NavigationDropdown>
          </li>
        </ul>
      </nav>
    </section>
    <section class="top-bar_extra">
      <div class="top-search">
        <i class="iconfont icon-sousuo"></i>
        <input type="text" placeholder="搜索文章、课程、资源..." />
      </div>
      <div class="top-bar_buttons">
        <button class="button1"><i class="iconfont icon-tongzhi"></i></button>
        <button class="button2">
          <i class="iconfont icon-xiewenzhang"></i><span>写文章</span>
        </button>
        <button class="button3">
          <img src="https://ai-public.mastergo.com/ai/img_res/650947139345270df47735e4547f34c5.jpg" alt="用户头像"
            class="user-avatar" /><i class="iconfont icon-xiasanjiao"></i>
        </button>
      </div>
    </section>
  </main>
</template>

<style lang="scss" scoped>
@use 'sass:color';

.top-bar_container {
  display: flex;
  max-width: 1280px;
  height: 80px;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
  background-color: vars.$vt-c-white; // 使用命名空间调用变量
  padding: 0 20px;
  margin: 0 auto;

  .top-bar_logo {
    display: flex;
    width: 700px;
    align-items: center;

    .top-bar_nav {
      width: 100%;
      font-size: vars.$font-size;
      margin: 0 20px;

      @media (max-width: 1130px) {
        font-size: 15px;
      }

      @media (max-width: 1110px) {
        font-size: 14px;
      }

      @media (max-width: 1048px) {
        font-size: 13px;
      }

      @media (max-width: 900px) {
        font-size: 12px;
      }

      .nav-menu {
        display: flex;
        height: 80px * 0.6;
        justify-content: space-between;
        align-items: center;
        list-style: none;
        padding: 0;
        margin: 0;

        .menu-item {
          display: flex;
          align-items: center;
          position: relative;

          &:hover {
            color: vars.$vt-c-blue-3b82f6; // 使用命名空间调用变量
            cursor: pointer;

            &::after {
              width: 100%;
            }

            .icon-xiasanjiao {
              font-size: 14px;
              transform: rotate(180deg);
            }
          }

          &::after {
            content: '';
            display: block;
            width: 0;
            height: 2px;
            background-color: vars.$vt-c-blue-3b82f6; // 使用命名空间调用变量
            transition: all 0.2s;
            position: absolute;
            bottom: -2px;
            left: 0;
          }

          a {
            width: 100%;
            font-weight: 500;
            text-align: center;
            text-decoration: none;
            color: inherit;
            margin: 0 0.5rem;

            .iconfont {
              font-size: 1.5rem;
              margin-right: 5px;
            }

            .icon-xiasanjiao {
              display: inline-block;
              font-size: 14px;
              margin-left: 5px;
              transition: all 0.1s;
            }

            .nav_text {
              vertical-align: text-bottom;
            }
          }
        }
      }
    }
  }

  .top-bar_extra {
    display: flex;
    align-items: center;
    gap: 20px;

    .top-search {
      min-width: 112px;
      position: relative;

      .icon-sousuo {
        color: var(--gray-400);
        pointer-events: none;
        /* 防止图标阻挡点击 */
        transform: translateY(-50%);
        position: absolute;
        left: 12px;
        top: 50%;
      }

      input {
        width: 100%;
        font-size: 14px;
        border: none;
        background: vars.$vt-c-blue-f9fafb; // 使用命名空间调用变量
        border-radius: 12px;
        padding: 10px 12px 10px 40px;
        transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);

        &:focus {
          outline: none;
          box-shadow: 0 0 0 2px vars.$vt-c-blue-box-shadow; // 使用命名空间调用变量
        }

        &:hover {
          background: vars.$vt-c-blue-f3f4f6; // 使用命名空间调用变量
        }

        &::placeholder {
          color: vars.$vt-c-placeholder-color; // 使用命名空间调用变量
        }
      }
    }

    .top-bar_buttons {
      display: flex;
      gap: 20px;

      @for $i from 1 through 3 {
        %common-button-styles {
          border-radius: 16px;
          padding: 8px 16px;
        }

        .button#{$i} {
          height: 45px;
          font-size: 16px;
          border: none;
          box-sizing: border-box;
          background-color: transparent;
          cursor: pointer;
          transition: all 0.2s;

          @if $i ==1 {
            @extend %common-button-styles;
            background-color: vars.$vt-c-blue-ecf2ff; // 使用命名空间调用变量
            color: vars.$vt-c-primary; // 使用命名空间调用变量

            &:hover {
              background-color: color.scale(vars.$vt-c-blue-ecf2ff,
                  $lightness: -5%); // 使用命名空间调用变量
              // color.darken(vars.$vt-c-blue-ecf2ff, 5%);
            }

            .iconfont {
              color: vars.$vt-c-primary; // 使用命名空间调用变量
            }
          }

          @if $i ==2 {
            @extend %common-button-styles;
            color: vars.$vt-c-white; // 使用命名空间调用变量
            background-color: vars.$vt-c-primary; // 使用命名空间调用变量

            &:hover {
              background-color: color.scale(vars.$vt-c-primary, $lightness: 10%);
              // lighten(vars.$vt-c-primary, 5%);
            }

            .iconfont {
              color: vars.$vt-c-white; // 使用命名空间调用变量
            }
          }

          @if $i ==3 {
            line-height: 45px;

            &:hover {
              .icon-xiasanjiao {
                transform: rotate(180deg);
              }
            }

            .user-avatar {
              height: 100%;
              border-radius: 18px;
              box-shadow: 0 0 0 2px vars.$vt-c-blue-box-shadow; // 使用命名空间调用变量
            }

            .icon-xiasanjiao {
              display: inline-block;
              vertical-align: text-bottom;
              margin-left: 10px;
              transition: all 0.2s;
            }
          }
        }
      }
    }
  }
}
</style>
